<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单留言板</title>
</head>

<body>
    
</body>
<script>
    var body = document.body
    console.log(body);
    var button = document.createElement('button')   // 创建 button
    body.appendChild(button)  // 追加 button
    button.id = 'btn'
    button.innerHTML = '发布'
    var input = document.createElement('input')
    body.appendChild(input)
    input.type = 'text'
    input.id = 'tex'
    var ul = document.createElement('ul')
    body.appendChild(ul)
    ul.id = 'ul'

    var btn = document.getElementById('btn')   // 获取 id
    var tex = document.getElementById('tex')
    var ul = document.querySelector('#ul')
                 // 监听器
    document.addEventListener('keydown', function (event) {   // 监听 键盘
        if (event.key === 'Enter') {  // 键盘 按下的 是否是 enter
            button.click();           // 绑定事件
        }
    });

    btn.onclick = function () {

        var text = tex.value;
        tex.value = ''   // 清空输入框 内容
        var li = document.createElement('li');  // 创建 li 标签
        /* 
        ul.appendChild(li)  // 追加 li 标签
         */
        ul.insertBefore(li, ul.firstChild)  // 追加 li 标签  ul 第一个位置
        // li.innerHTML = text+'<a href="JavaScript:;">删除</a>';
        li.innerHTML = text;  // 在 li 标签内 添加内容

        var del = document.createElement('a')
        li.appendChild(del)
        del.href = 'JavaScript:;'
        del.innerHTML = '删除'

        del.onclick = function () {
            this.parentNode.parentNode.removeChild(this.parentNode)
        }



    }
</script>

</html>